<!--  我的  -->
<template>
  <div class="mine-page">
    <!--   区分使用mapState, mapGetters时, 读取vuex中数据的区别   -->
    <!--    <div>{{user.account}}</div>    -->
    <!--<div>{{account}}</div>-->
    <!-- 使用手机号登录，自动绑定无需处理 -->
    <van-notice-bar v-if="false" left-icon="volume-o" wrapable :scrollable="false"
      >您还没有绑定手机号，为保障您的利益请尽快绑定</van-notice-bar
    >
    <div class="header">
      <div class="userWorkbench">
        <van-row class="avatar_login">
          <van-col span="6" class="userImg">
            <van-image
              class="img"
              width="60"
              height="60"
              :src="allUserInfo.avatar ? allUserInfo.avatar : logoImg"
              round
              fit="cover"
            />
          </van-col>
          <van-col span="9" class="userLogin">
            <div class="isLogin" v-if="!allUserInfo.id" @click="$router.push('/login')">未登录, 去登录</div>
            <!--            <div class="isLogin" v-else>{{allUserInfo.id.substring(0,15)}}</div>-->
            <template v-else>
              <div class="nick_name van-ellipsis">昵称: {{ allUserInfo.nick_name || '近聘' }}</div>
              <div class="account">账号: {{ allUserInfo.ids || '近聘' }}</div>
              <div class="account">手机: {{ allUserInfo.mobile || '' }}</div>
            </template>
          </van-col>
          <van-col span="7" class="userDetail">
            <div class="myFile" @click="$router.push('/profile')">个人资料 ></div>
            <div class="jinpinHelper" style="color:#0099FF; margin-top: 16px;" @click="toJinpinHelper">使用助手 ></div>
          </van-col>
        </van-row>
        <!--        <van-row class="workbench">
          <van-col span="6" class="workScore">
            <div class="score">0</div>
            <div class="result">工作分</div>
          </van-col>
          <van-col span="6" class="agencyScore">
            <div class="score">0</div>
            <div class="result">代招分</div>
          </van-col>
          <van-col span="6" class="collection">
            <div class="score">0</div>
            <div class="result">业务分</div>
          </van-col>
          <van-col span="6" class="recentlyView">
            <div class="score">0</div>
            <div class="result">信用分</div>
          </van-col>
        </van-row>-->
      </div>
    </div>
    <div class="work-profit packet">
      <div @click="goNeedCertification('wallet')" class="packet_js">钱包记录</div>
      <div @click="goNeedCertification('packet')" class="packet-flex packet_total">¥ {{ caip }}</div>
      <div @click="goNeedCertification('rechange')" class="rechange">充值</div>
      <div @click="goNeedCertification('withdraw')" class="rechange">提现</div>
    </div>
    <div class="work-profit">
      <div class="title">工作收益</div>
      <van-grid>
        <van-grid-item :icon="yibaoming" text="已报名" @click="goNeedCertification('hasSignUpList')" />
        <van-grid-item :icon="yigongzuo" text="已工作" @click="goNeedCertification('hasWorkedList')" />
        <van-grid-item :icon="shenqingjiezhi" text="申请借支" @click="goNeedCertification('lendMoney')" />
        <van-grid-item :icon="gongzuojiesuan" text="工资结算" @click="goNeedCertification('wageSettlement')" />
      </van-grid>
    </div>
    <div class="agency-profit">
      <div class="title">集团业务</div>
      <van-grid>
        <van-grid-item :icon="stock" text="集团股份" @click="$router.push('/groupStock')" />
        <!--        <van-grid-item :icon="jijin" text="集团基金" />
        <van-grid-item :icon="fuli" text="集团福利" />
        <van-grid-item :icon="fuwu" text="集团服务" />-->
        <!--<van-grid-item :icon="wodeshouyi" text="我的收益" @click="$router.push('/myEarnings')" />
        <van-grid-item :icon="wodeshouyi" text="我的收益"/>
        <van-grid-item :icon="shouyijiesuan" text="收益结算" />-->
      </van-grid>
    </div>
    <div class="agency-share">
      <div class="title">推广赚钱服务</div>
      <van-grid>
        <van-grid-item :icon="my_link" text="我的链接" @click="goGuideRoute('L')" />
        <van-grid-item :icon="shubanhaibao" text="竖版海报" @click="goGuideRoute('V')" />
        <van-grid-item :icon="hengbanhaibao" text="横版海报" @click="goGuideRoute('H')" />
        <van-grid-item :icon="wodexiajia" text="推广用户" @click="$router.push('/recommend_persons')" />
      </van-grid>
    </div>

    <div class="service">
      <div class="title">服务</div>

      <van-grid>
        <van-grid-item :icon="wodekefu" text="近聘客服" @click="toWxService()" />
        <van-grid-item :icon="wodeguanzhu" text="我的关注" @click="$router.push('/myAttention')" />
        <van-grid-item :icon="wodeshoucang" text="收藏记录" @click="collection()" />
        <van-grid-item :icon="liulanjilu" text="浏览记录" @click="$router.push('/browsingHistory')" />
        <van-grid-item :icon="gerenrenzheng" text="个人认证" @click="$router.push('/personalAuth')" />
        <van-grid-item :icon="qiyerenzheng" text="企业认证" @click="goNeedCertification('enterpriseAuth')" />
        <van-grid-item :icon="wodefabu" text="我的公司" @click="goNeedComCertification('myCompany')" />
        <!--        <van-grid-item :icon="dianpuguanli" text="我的店铺" />-->
      </van-grid>
    </div>

    <van-popup v-model:show="isPrivacy" round :overlay="true" data-disable-auto-close="false" :close-on-click-overlay="false">
        <div class="version_box">
          <div style="height:60vh;padding: 15px;" v-if="isPrivacyType == 0">
            <div class="title">欢迎使用您使用近聘</div>
            <div class="text">
              我们承诺会采取业界先进的安全措施保护您的信息安全，在您使用本应用时，我们会向您申请或获取定位、相机、相册、日历、麦克风、通知等权限，请知悉，您同意本弹窗内容相应设备权限并不会默认开启，我们会在您使用到相应业务功能时，另行弹窗征得您的同意后开启。同时我们需要您的设备信息、应用安装列表、日志信息用于信息发布、打击违法违规行为及防止平台用户个人信息泄露。提示您注意，我们仅向16周岁以上的用户提供求职招聘服务，如果您未满16周岁，请不要以任何方式使用我们服务。当我们得知我们无意中收集了16周岁以下人士的个人信息时，我们会根据适用法律法规进行删除或采取其他合适的措施。
            </div>
            <div class="text">点击同意，视为您已阅读并同意近聘
              <p>
                <span @click="isPrivacyType = 1">《近聘用户协议》</span>
                <span @click="isPrivacyType = 2">《隐私政策》</span>
              </p>
            </div>
            <div class="bottom">
              <span @click="refused">拒绝</span>
              <span class="agree" @click="agreeApp()">同意</span>
            </div>
          </div>
          <div style="height:60vh;padding: 15px;" v-if="isPrivacyType == 1">
            <userAgreement @changeIsPrivacy="changeIsPrivacy" :type="1"/>
          </div>
          <div style="height:60vh;padding: 15px;" v-if="isPrivacyType == 2">
            <privacyAgreement  @changeIsPrivacy="changeIsPrivacy" :type="1"/>
          </div>
        </div>
      </van-popup>
  </div>
</template>

<script>
import wxShare from '../../utils/wxShare'

import {Toast, Dialog} from 'vant'
import logoImg from '@/assets/logo.png'
import stock from '@/assets/img/mine/stock.png'
import jijin from '@/assets/img/mine/jijin.png'
import fuli from '@/assets/img/mine/fuli.png'
import fuwu from '@/assets/img/mine/fuwu.png'

import {mapGetters} from 'vuex'

import {base_url} from '../../constants/comUtils'
import { setInterval } from 'timers';

export default {
  name: 'mine',
  data() {
    return {
      isPrivacy:false,
      isPrivacyType:0,
      caip: '0',
      loginStatus: false,
      logoImg,
      yibaoming: require('./../../assets/img/yibaoming.png'),
      my_link: require('./../../assets/img/my_link.png'),
      dianpuguanli: require('./../../assets/img/dianpuguanli.png'),
      gerenrenzheng: require('./../../assets/img/gerenrenzheng.png'),
      gongzuojiesuan: require('./../../assets/img/gongzuojiesuan.png'),
      hengbanhaibao: require('./../../assets/img/hengbanhaibao.png'),
      liulanjilu: require('./../../assets/img/liulanjilu.png'),
      qiyerenzheng: require('./../../assets/img/qiyerengzheng.png'),
      shenqingjiezhi: require('./../../assets/img/shenqingjiezhi.png'),
      shouyijiesuan: require('./../../assets/img/shouyijiesuan.png'),
      shubanhaibao: require('./../../assets/img/shubanhaibao.png'),
      wodefabu: require('./../../assets/img/wodefabu.png'),
      wodeguanzhu: require('./../../assets/img/wodeguanzhu.png'),
      wodekefu: require('./../../assets/img/wodekefu.png'),
      zhushou: require('./../../assets/img/zhushou.png'),
      wodeshoucang: require('./../../assets/img/wodeshoucang.png'),
      wodeshouyi: require('./../../assets/img/wodeshouyi.png'),
      wodexiajia: require('./../../assets/img/wodexiajia.png'),
      yigongzuo: require('./../../assets/img/yigongzuo.png'),
      link: '',
      jijin,
      stock,
      fuli,
      fuwu,
      base_url
    }
  },
  computed: {
    ...mapGetters(['allUserInfo'])
  },
  created() {
    let isLogin = localStorage.getItem('allCertificate')
    let isApp = localStorage.getItem('isAgree')
    
    if(!isApp&&isLogin){
      this.isPrivacy = true
    }

    this.allCertificate = window.localStorage.getItem('allCertificate')
    if (this.allCertificate) {
      this.Finance()
      this.$store.dispatch('getUserAllInfo')
    }
    this.signaR.connectServer(this.allUserInfo.id)
  },

  mounted() {
    // 实时获取，每60秒请求一次
    if (this.allCertificate) {
      // this.signlar()
      this.timerId = setInterval(() => {
        this.$store.dispatch('getUserAllInfo')
      }, 60000)
    }
  },

  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timerId)
  },

  methods: {
    // 退出app
    refused(){
      plus.runtime.quit();
    },
    agreeApp(){
      this.isPrivacy = false
      localStorage.setItem('isAgree',1)
    },
    signlar(){
      let user = JSON.parse(localStorage.getItem('userInfo'))
      this.signaR.connectServer(user.id)
      let signlarTimer = setInterval(()=>{
        this.signaR.connectServer(user.id)
      },600000)
    },

    // 页面报错
    /*postWechatSignature({ url: window.location.href }).then((res) => {
      if (res.status === 200) {
        const { data } = res;
        wxShare.getJSSDK(data, dataForWeixin)
      }
    }),*/

    toWxService() {
      // customer_service
      this.$router.push({
        name: 'customer_service'
      })
      // let wxServiceUrl = 'https://work.weixin.qq.com/kfid/kfc7df01a980df46199'
      // console.log('是否执行', wxServiceUrl)

      // 方案三：使用第三方浏览器（手机默认浏览器）跳转
      // let urlStr = encodeURI(wxServiceUrl)
      // try {
      //   plus.runtime.openURL(urlStr)
      // } catch (error) {
      //   window.location.href = wxServiceUrl
      // }
    },

    toJinpinHelper() {
      this.$router.push({
        name: 'jinpinHelper'
      })
    },

    // collectionHistory
    collection() {
      this.$router.push({
        name: 'collectionHistory',
        params: {
          id: 1
        }
      })
    },
    //获取钱包余额
    async Finance() {
      const res = await this.$api.job.getFinance()
      if (res.code === 200) this.caip = res.data.fina.caip / 1000 || 0
    },

    //需要公司认证的路径
    goNeedComCertification(url) {
      let allCertificate = window.localStorage.getItem('allCertificate')
      // console.log(this.allUserInfo.company_certification_state)
      // 有登录凭证才能看到
      if (allCertificate) {
        if (this.allUserInfo.certification_state === 2) {
          if (this.allUserInfo.company_certification_state === 2) {
            this.$router.push(url)
          } else if (this.allUserInfo.company_certification_state === 0) {
            Dialog.confirm({
              title: '尚未公司认证！',
              message: '需要公司认证！你当前还没有进行公司认证，请点击去公司认证。',
              messageAlign: 'left',
              confirmButtonText: '去公司认证'
            })
              .then(() => {
                this.$router.push('/enterpriseAuth')
              })
              .catch(() => {
                // on cancel
              })
          } else {
            Dialog.confirm({
              title: '公司认证未完成',
              message: '你的公司认证正在审核中，或者还没有通过。请点击去公司认证去查看！',
              messageAlign: 'left',
              confirmButtonText: '去公司认证'
            })
              .then(() => {
                this.$router.push('/enterpriseAuth')
              })
              .catch(() => {
                // on cancel
              })
          }
        } else if (this.allUserInfo.certification_state === 0) {
          Dialog.confirm({
            title: '尚未个人认证！',
            message: '需要个人认证！你当前还没有进行个人认证，请点击去个人认证。',
            messageAlign: 'left',
            confirmButtonText: '去个人认证'
          })
            .then(() => {
              this.$router.push('/personalAuth')
            })
            .catch(() => {
              // on cancel
            })
        } else {
          Dialog.confirm({
            title: '个人认证未完成',
            message: '你的个人认证正在审核中，或者还没有通过。请点击去个人认证去查看！',
            messageAlign: 'left',
            confirmButtonText: '去个人认证'
          })
            .then(() => {
              this.$router.push('/personalAuth')
            })
            .catch(() => {
              // on cancel
            })
        }
      } else {
        this.$store.dispatch('logOut')
        Dialog.confirm({
          message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
        })
          .then(() => {
            this.$router.push({
              path: '/login'
            })
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    goGuideRoute(url) {
      // 2022-02-28的新需求, 需要自定义链接和海报。因此需要在guide页进行自定义
      url &&
        this.$router.push({
          name: 'guide',
          query: {
            source_type: url
          }
        })
    },
    //需要个人认证的路径
    goNeedCertification(url, callback) {
      let allCertificate = window.localStorage.getItem('allCertificate')
      // 有登录凭证才能看到
      if (allCertificate) {
        if (this.allUserInfo.certification_state === 2) {
          if (url === 'wallet') {
            this.$router.push({
              name: 'wallet',
              query: {
                type: 0
              }
            })
          } else if (url === 'packet') {
            console.log('2022-03-08注释点击金额进入的页面')
          } else {
            url && this.$router.push(url)
            callback && callback()
          }
        } else if (this.allUserInfo.certification_state === 0) {
          Dialog.confirm({
            title: '尚未个人认证！',
            message: '工作报名需要个人认证！你当前还没有进行个人认证，无法报名。请点击去个人认证。',
            messageAlign: 'left',
            confirmButtonText: '去个人认证'
          })
            .then(() => {
              this.$router.push('/personalAuth')
            })
            .catch(() => {
              // on cancel
            })
        } else {
          Dialog.confirm({
            title: '个人认证未完成',
            message: '你的个人认证正在审核中，或者还没有通过。请点击去个人认证去查看。',
            messageAlign: 'left',
            confirmButtonText: '去个人认证'
          })
            .then(() => {
              this.$router.push('/personalAuth')
            })
            .catch(() => {
              // on cancel
            })
        }
      } else {
        this.$store.dispatch('logOut')
        Dialog.confirm({
          message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
        })
          .then(() => {
            this.$router.push({
              path: '/login'
            })
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    showDig() {
      if (this.allUserInfo.id) {
        // rpId 是推荐人的id
        // gId 是推荐人的企业的id
        // p 是个人认证 状态
        // g 是企业认证 状态

        const {
          account,
          ids,
          company_id = '',
          p = 2,
          certification_state,
          g = 2,
          company_certification_state
        } = this.allUserInfo
        this.link =
          this.base_url +
          '?' +
          `rpId=${ids}&gId=${company_id}&p=${certification_state}&g=${company_certification_state}&st=V&account=${this.$Base64.encode(
            account
          )}`

        Dialog.confirm({
          title: '温馨提示',
          message: `将我的链接复制、粘贴到手机短信、微信朋友圈、QQ空间等各大社交软件，发送给好友注册下载，推广企业用户赚企业提成，推广个人用户赚代招费。我的链接为：${this.link}`,
          confirmButtonText: '复制链接',
          confirmButtonColor: '#1989FA',
          messageAlign: 'left'
        })
          .then(() => {
            // 点击确定
            this.$copyText(this.link).then(
              function(e) {
                Toast('复制成功')
              },
              function(e) {
                Toast('复制出错')
              }
            )
          })
          .catch(() => {
            // on cancel
          })
      } else {
        let allCertificate = window.localStorage.getItem('allCertificate')
        // 有登录凭证才能看到
        if (allCertificate) {
        } else {
          this.$store.dispatch('logOut')
          Dialog.confirm({
            message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
          })
            .then(() => {
              this.$router.push({
                path: '/login'
              })
            })
            .catch(() => {
              // on cancel
            })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.version_box{
  height:60vh;
  width:80vw;
  // position: static;
  .title{
    font-size: 18px;
    height:30px;
    line-height: 30px;
    font-weight: 700;
  }
  .text{
    font-size: 14px;
    p{
    span{
      color:#84b9b7;
    }

    }
  }
  .bottom{
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    color:#ddd;
    span{
      padding: 5px 10px;
    }
    .agree{
      color:#84b9b7;

    }
  }
}
.mine-page {
  width: 100%;
  background-color: #f3f3f3;
  .header {
    padding: 20px 5px 0 5px;
    margin-bottom: 16px;
    .userWorkbench {
      background-color: #ffffff;
      border-radius: 6%;
      padding: 8px 0;
      .avatar_login {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        font-size: 16px;
        .userLogin {
          text-align: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .isLogin {
            margin-bottom: 10px;
            font-weight: bold;
          }
          .nick_name,
          .account {
            font-size: 14px;
            margin-bottom: 6px;
          }
          .phone {
            font-size: 15px;
          }
        }
        .userDetail {
          font-size: 13.6px;
        }
      }
      .workbench {
        & .workScore,
        & .agencyScore,
        & .collection,
        & .recentlyView {
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          align-content: center;
          text-align: center;
          .score {
            width: 100%;
            margin-top: 6px;
            margin-bottom: 6px;
          }
          .result {
            width: 100%;
            margin-bottom: 6px;
          }
        }
      }
    }
  }
  & .work-profit,
  & .agency-profit,
  & .agency-share,
  & .service {
    margin-bottom: 12px;
    background-color: #ffffff;
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 13px;
      padding-left: 26px;
      font-weight: bold;
    }
  }
  .packet {
    display: flex;
    padding: 5px 0;
    .packet-flex {
      width: 40%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .packet_js {
      width: 28%;
      color: rgb(0, 145, 255);
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .packet_total {
      width: 40%;
      font-size: 16px;
      color: rgb(0, 145, 255);
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .rechange {
      width: 14%;
      text-align: center;
      line-height: 30px;
      color: rgb(0, 145, 255);
    }
  }
}
</style>
